import {
	Form,
	Input,
	Button,
	Toast,
} from 'antd-mobile'
import styles from './index.less'
import { ReactComponent as ChatGptSvg } from '../../assets/chatgpt.svg'
import { history } from 'umi'
import clxs from 'classnames'
import { useState } from 'react'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import { register } from '../../services/login'
import style from 'react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark'


const Register = () => {
	const [visible, setVisible] = useState<boolean>(false)


	const onFinish = (values: any) => {
		register(values).then(({ result }: any) => {
			localStorage.setItem('token', result)
			history.push('/')
		}, ({ response }) => {
			Toast.show({ content: response?.data?.msg })
		})
	}

	return (
		<div className={styles.box_view}>
			<div className={styles.header_view}>
				<ChatGptSvg />
			</div>
			<h1 className={styles.welcome}>Register Deepseek</h1>
			<div className={styles.content_view}>
				<Form
					layout='horizontal'
					onFinish={onFinish}
					footer={
						<Button block type='submit' className={styles.submit_btn} size='large'>注册</Button>
					}>
					<Form.Item
						name='username'
						rules={[{ required: true, message: '用户名不能为空' }]}>
						<div className={styles.form_item}>
							<Input placeholder="用户名" className={styles.username} />
						</div>
					</Form.Item>
					<Form.Item
						name='password'
						rules={[{ required: true, message: '密码不能为空' }]}>
						<div className={clxs(styles.form_item, styles.password_input)} style={{ marginTop: '2rem' }}>
								<Input placeholder="密码" className={styles.username} type={visible ? 'text' : 'password'} />
								<div className={styles.eye}>
										{!visible ? (
												<EyeInvisibleOutline onClick={() => setVisible(true)} />
										) : (
												<EyeOutline onClick={() => setVisible(false)} />
										)}
								</div>
						</div>
					</Form.Item>
					<Form.Item
							name='confirmPassword'
							dependencies={['password']}
							rules={[
									{ required: true, message: '请确认密码' },
									({ getFieldValue }) => ({
											validator(_, value) {
													if (!value || getFieldValue('password') === value) {
															return Promise.resolve();
													}
													return Promise.reject(new Error('两次输入的密码不一致'));
											},
									}),
							]}>
							<div className={clxs(styles.form_item, styles.password_input)} style={{ marginTop: '2rem' }}>
									<Input placeholder="再次输入密码确认" className={styles.username} type={visible ? 'text' : 'password'} />
									<div className={styles.eye}>
											{!visible ? (
													<EyeInvisibleOutline onClick={() => setVisible(true)} />
											) : (
													<EyeOutline onClick={() => setVisible(false)} />
											)}
									</div>
							</div>
					</Form.Item>
					<Form.Item
							name='code'
							rules={[{ required: true, message: '邀请码不能为空' }]}>
							<div className={styles.form_item}>
								<Input placeholder="邀请码" className={styles.username} />
							</div>
					</Form.Item>
				</Form>
				<p className={styles.go_login} onClick={() => history.replace('/login')}>已有账号，去登录</p>
			</div>
		</div>
	)
}

export default Register